<template>
  <div class="dashboard-container">
    <!-- 顶部导航 -->
    <TopNav />
    <!-- <div class="top-nav">
      <div class="nav-links">
        <RouterLink to="/active" class="nav-button">活动中心</RouterLink>
        <RouterLink to="/SelectActive" class="nav-button">选择活动</RouterLink>
        <RouterLink to="/Test" class="nav-button">测试练习</RouterLink>
        <RouterLink to="/Search" class="nav-button">单词搜索</RouterLink>
        <RouterLink to="/Composition" class="nav-button">作文练习</RouterLink>
        <RouterLink to="/NewWord" class="nav-button">新词学习</RouterLink>
      </div>
      <button class="logout-button" @click="logout">
        <i class="fas fa-sign-out-alt"></i> 退出登录
      </button>
    </div> -->

    <!-- 主仪表盘内容 -->
    <div class="dashboard-content">
      <!-- 用户概览卡片 -->
      <div class="user-overview">
        <div class="welcome-card">
          <div class="avatar">
            <img style="
                margin-top: 10px;
                margin-left: 5px;
                width: 60px;
                height: 60px;
                border-radius: 100%;
              " class="fas fa-user-circle" :src="USER_DATA && USER_DATA.avatar
                ? `../../../public/avatar/${USER_DATA.avatar}.png`
                : '../../../public/avatar/default-avatar.png'
                " alt="" />
            <!-- <i class="fas fa-user-circle">
              <img src="../../../public/avatar/avatar1.png" alt="">
            </i> -->
          </div>
          <div class="user-info">
            <h2>欢迎回来, {{ username }}</h2>
            <p>今日已学习 {{ todayLearned }} 个单词</p>
            <div class="streak">
              <i class="fas fa-fire"></i>
              <span>连续签到: {{ checkinDays }} 天</span>
            </div>
          </div>
          <div class="user_signin">
            <button v-if="!hasSignedInToday" class="signin-btn" @click="handleSignin">
              <span>签到</span>
            </button>
          </div>
        </div>

        <div class="stats-grid">
          <div class="stat-card" style="--card-color: #4e73df">
            <div class="stat-icon">
              <i class="fas fa-book-open"></i>
            </div>
            <div class="stat-info">
              <h3>已学习</h3>
              <p>{{ learnedCount }} 个</p>
            </div>
          </div>

          <div class="stat-card" style="--card-color: #1cc88a">
            <div class="stat-icon">
              <i class="fas fa-cog"></i>
            </div>
            <div class="stat-info">
              <h3>每组单词数量</h3>
              <input type="number" v-model.number="wordsPerGroup" min="1" max="100" style="width: 80px; padding: 4px" />
              <button @click="saveSetting" style="margin-top: 5px; padding: 4px 8px">
                保存
              </button>
            </div>
          </div>

          <div class="stat-card" style="--card-color: #f6c23e">
            <div class="stat-icon">
              <i class="fas fa-clock"></i>
            </div>
            <div class="stat-info">
              <h3>今日需复习</h3>
              <p>{{ TodayNeedReviewWordCount }}</p>
            </div>
          </div>

          <div class="stat-card" style="--card-color: #e74a3b">
            <div class="stat-icon">
              <i class="fas fa-exclamation-circle"></i>
            </div>
            <div class="stat-info">
              <h3>待学习</h3>
              <p>{{ unlearnedCount }} 个</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据可视化区域 -->
      <div class="visualization-section">
        <!-- 学习进度图表 -->
        <div class="chart-card">
          <h3><i class="fas fa-chart-line"></i> 学习进度</h3>
          <div class="chart-container">
            <canvas ref="progressChart"></canvas>
          </div>
        </div>

        <!-- 签到日历 -->
        <div class="chart-card">
          <h3><i class="fas fa-calendar-alt"></i> 签到日历</h3>
          <div class="calendar">
            <div class="calendar-header">
              <button @click="prevMonth">
                <i class="fas fa-chevron-left"></i>
              </button>
              <h4>{{ currentMonth }}</h4>
              <button @click="nextMonth">
                <i class="fas fa-chevron-right"></i>
              </button>
            </div>
            <div class="calendar-grid">
              <div v-for="day in calendarDays" :key="day.date"
                :class="['day', { checked: day.checked, today: day.isToday }]">
                {{ day.day }}
                <i v-if="day.checked" class="fas fa-check"></i>
              </div>
            </div>
          </div>
        </div>

        <!-- 学习时间分布 -->
        <div class="chart-card">
          <h3><i class="fas fa-clock"></i> 学习时间分布</h3>
          <div class="chart-container">
            <canvas ref="timeChart"></canvas>
          </div>
        </div>

        <!-- 单词掌握程度 -->
        <div class="chart-card">
          <h3><i class="fas fa-brain"></i> 单词掌握程度</h3>
          <div class="chart-container">
            <canvas ref="masteryChart"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ExcelData />
</template>

<script setup>
import { ElMessage } from "element-plus";
import dayjs from 'dayjs';
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { Chart, registerables } from "chart.js";
import TopNav from "../../components/TopNav.vue";
import ExcelData from "../../components/ExcelData.vue";

import {
  getUserStats,
  userSignin,
  getSigninRecords,
  getReviewWordCount,
  getUserData,
  LogoutUpdateLog,
  getStudyWordNumberInEveryMonthlyApi,
  getUserWordProficiencyDistributionApi
} from "../../api/authService.js"; // 导入 getUserStats 函数
const hasSignedInToday = ref(false); // 是否已签到

const userId = localStorage.getItem("userId");
// 注册Chart.js组件
Chart.register(...registerables);

const router = useRouter();

// 定义签到日期列表
const signinDateStrings = ref([]);
// 模拟数据 - 实际应用中应从API获取
const username = ref("学习者");
const checkinDays = ref(7);
const learnedCount = ref(356);
const unlearnedCount = ref(124);
const todayLearned = ref(15);
const dailyGoal = ref(20);
const todayGoal = ref(15);
const studyTime = ref(86);
const wordsTotle = ref(500);
const TodayNeedReviewWordCount = ref(0);

// 日历相关数据
const currentDate = ref(new Date());
const calendarDays = ref(generateCalendarDays());

// 图表引用
const progressChart = ref(null);
const timeChart = ref(null);
const masteryChart = ref(null);
const USER_DATA = ref(null);

// 生成日历天数
// function generateCalendarDays() {
//   const year = currentDate.value.getFullYear();
//   const month = currentDate.value.getMonth();
//   const daysInMonth = new Date(year, month + 1, 0).getDate();
//   const firstDay = new Date(year, month, 1).getDay();

//   const days = [];

//   // 填充空白
//   for (let i = 0; i < firstDay; i++) {
//     days.push({ day: "", date: null, checked: false, isToday: false });
//   }
//   console.log(days, "days");

//   // 填充日期
//   const today = new Date();
//   for (let i = 1; i <= daysInMonth; i++) {
//     const date = new Date(year, month, i);
//     days.push({
//       day: i,
//       date: date,
//       checked: Math.random() > 0.3, // 模拟签到数据
//       isToday: date.toDateString() === today.toDateString(),
//     });
//   }

//   return days;
// }
function generateCalendarDays() {
  const year = currentDate.value.getFullYear();
  const month = currentDate.value.getMonth();
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const firstDay = new Date(year, month, 1).getDay(); // 周日=0

  const days = [];

  // 前置空白（如从周一开始的话需要改 firstDay 的计算）
  for (let i = 0; i < firstDay; i++) {
    days.push({ day: "", date: null, checked: false, isToday: false });
  }

  const today = new Date();
  const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;

  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(year, month, i);
    const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(i).padStart(2, '0')}`;

    days.push({
      day: i,
      date,
      checked: signinDateStrings.value.includes(dateStr),
      isToday: dateStr === todayStr,
    });
  }

  // console.log("calendar days:", days);
  return days;
}


// 月份导航
function prevMonth() {
  currentDate.value = new Date(
    currentDate.value.getFullYear(),
    currentDate.value.getMonth() - 1,
    1
  );
  calendarDays.value = generateCalendarDays();
}

function nextMonth() {
  currentDate.value = new Date(
    currentDate.value.getFullYear(),
    currentDate.value.getMonth() + 1,
    1
  );
  calendarDays.value = generateCalendarDays();
}

// 当前月份显示
const currentMonth = computed(() => {
  return currentDate.value.toLocaleString("default", {
    month: "long",
    year: "numeric",
  });
});

// 📅 获取签到记录并处理成 YYYY-MM-DD 格式
const loadSigninRecords = async () => {
  try {
    const result = await getSigninRecords(userId);
    if (result?.success) {
      // 确保records存在且是数组
      const records = Array.isArray(result.records) ? result.records : [];

      // 处理日期格式，添加时区安全转换
      signinDateStrings.value = records
        .map((record) => {
          if (!record?.signin_date) return "";

          // 更安全的日期处理方式
          const date = new Date(record.signin_date);
          if (isNaN(date.getTime())) return ""; // 检查无效日期

          // 使用本地日期而不是UTC，避免时区问题
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");

          return `${year}-${month}-${day}`;
        })
        .filter((dateStr) => dateStr); // 过滤掉无效日期

      // 检查今天是否签到 - 使用本地日期
      const today = new Date();
      const todayStr = `${today.getFullYear()}-${String(
        today.getMonth() + 1
      ).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;

      hasSignedInToday.value = signinDateStrings.value.includes(todayStr);

      // 刷新日历
      calendarDays.value = generateCalendarDays();
    } else {
      ElMessage.error(result?.message || "获取签到记录失败");
    }
  } catch (error) {
    console.error("加载签到记录出错:", error);
    ElMessage.error("加载签到记录出错");
  }
};
//获取需要复习的单词数量
// 📊 获取需要复习的单词数量
const loadReviewWordsCount = async () => {
  // loading.value = true; // 可选：加载动画

  try {
    const res = await getReviewWordCount(userId);

    if (res.success) {
      const { count } = res;
      TodayNeedReviewWordCount.value = count;
      // console.log(`当前需复习单词数量：${count}`);
      // 你可以把 count 设置到某个响应式变量中，例如 reviewCount.value = count
    } else {
      ElMessage.error(res.message || "获取复习单词数量失败");
    }
  } catch (error) {
    console.error("请求失败:", error);
    const msg = error?.response?.data?.message || error.message || "网络错误";
    ElMessage.error("获取失败: " + msg);
  } finally {
    // loading.value = false;
  }
};

const loadGetUserData = async () => {
  try {
    const res = await getUserData(userId);
    // console.log(res, '获取用户数据');
    if (res) {
      USER_DATA.value = res;
      // console.log(res);
      // console.log(USER_DATA.value);
    } else {
      ElMessage.error(res.message || "获取用户数据失败");
    }
  } catch (error) {
    ElMessage.error("获取失败: " + msg);
  } finally {
    // loading.value = false;
  }
};

const handleSignin = async () => {
  const result = await userSignin(userId); // 模拟接口签到
  // console.log(userId);

  if (result.success) {
    ElMessage.success("签到成功！");
    hasSignedInToday.value = true; // 隐藏按钮
    loadSigninRecords(); // 重新加载日历
  } else {
    ElMessage.error(result.message || "签到失败");
  }
};

const STORAGE_KEY = "wordsPerGroup";
const wordsPerGroup = ref(10); // 默认值

// 保存到本地
const saveSetting = () => {
  // 确保 wordsPerGroup 是有效的数字，并且在 5 到 20 之间
  if (wordsPerGroup.value >= 5 && wordsPerGroup.value <= 20) {
    localStorage.setItem(STORAGE_KEY, wordsPerGroup.value);
    alert(`保存成功，每组单词数量为：${wordsPerGroup.value}`);
  } else {
    alert("请输入一个有效的数字，范围应为 5 到 20");
  }
};
// 每月学习单词数量
const getStudyWordNumberInEveryMonthly = async () => {
  try {
    const res = await getStudyWordNumberInEveryMonthlyApi(userId);
    // console.log(res);
    if (res) {
      // console.log(res, "用户每月学习单词数");
      // initChart(res.stats);
      return res.stats;
    } else {
    }
  } catch (err) {

  }
}
// 用户单词熟练度
const getUserWordProficiencyDistribution = async () => {
  try {
    const res = await getUserWordProficiencyDistributionApi(userId);
    // console.log(res);
    if (res) {
      // console.log(res, "用户单词熟练度");
      // initChart(res.stats);
      return res.stats;
    } else {
    }
  } catch (err) {

  }
}

const AllChartDataRequestComplete = async () => {
  try {
    // 等待这两个请求成功返回
    const [studyWordData, proficiencyData] = await Promise.all([
      getStudyWordNumberInEveryMonthly(),
      getUserWordProficiencyDistribution(),
    ]);
    // console.log(studyWordData, proficiencyData, "初始化图表");
    // 检查是否成功获取数据
    if (!studyWordData || !proficiencyData) {
      console.error('数据获取失败');
      return;
    }

    // 如果两个请求都成功，初始化图表
    // initializeProgressChart(studyWordData, proficiencyData);
    // console.log(studyWordData, proficiencyData, "初始化图表");
    initChart(studyWordData, proficiencyData)
  } catch (error) {
    console.error('请求失败:', error);
  }
}


// 计算每个月的单词数
const getLastSixMonths = () => {
  const months = [];
  const now = dayjs();
  for (let i = 5; i >= 0; i--) {
    const date = now.subtract(i, 'month');
    months.push({
      label: `${date.month() + 1}月`, // month() 从 0 开始
      key: date.format('YYYY-MM')
    });
  }
  return months;
};

const prepareChartData = (StudyWorddata) => {
  const rawDataMap = {};
  StudyWorddata.forEach(item => {
    rawDataMap[item.month] = parseInt(item.total_word_count, 10);
  });

  const months = getLastSixMonths();
  const labels = months.map(m => m.label);
  const data = months.map(m => rawDataMap[m.key] || 0);

  return { labels, data };
};

// 整理熟练度数据
const prepareProficiencyData = (proficiencyData) => {
  const labelMap = {
    0: '初见',
    1: '模糊',
    2: '了解',
    3: '一般',
    4: '生疏',
    5: '熟悉',
    6: '掌握'
  };

  const ProficiencyLabels = [];
  const ProficiencyData = [];

  // 确保顺序从 0 到 6
  for (let i = 0; i <= 6; i++) {
    const label = labelMap[i];
    const found = proficiencyData.find(item => item.proficiency === i);
    ProficiencyLabels.push(label);
    ProficiencyData.push(found ? found.count : 0);
  }

  return { ProficiencyLabels, ProficiencyData };
};



// 初始化图表
const initChart = (StudyWorddata, proficiencyData) => {
  // console.log(StudyWorddata, "用户每月学习单词数");
  // 学习进度图表
  // console.log(StudyWorddata, proficiencyData, "初始化图表");
  // console.log(prepareProficiencyData(proficiencyData), "熟练度数据");
  const { labels, data } = prepareChartData(StudyWorddata);
  // console.log(labels, data, "整理后的数据");
  const { ProficiencyLabels, ProficiencyData } = prepareProficiencyData(proficiencyData);
  // console.log(ProficiencyLabels, ProficiencyData);
  new Chart(progressChart.value, {
    type: "line",
    data: {
      labels: labels,
      datasets: [
        {
          label: "已学单词",
          data: data,
          borderColor: "#4e73df",
          backgroundColor: "rgba(78, 115, 223, 0.05)",
          tension: 0.4,
          fill: true,
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          display: false,
        },
      },
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });

  // 学习时间分布图表
  new Chart(timeChart.value, {
    type: "doughnut",
    data: {
      labels: ["早晨", "上午", "下午", "晚上", "深夜"],
      datasets: [
        {
          data: [15, 30, 25, 20, 10],
          backgroundColor: [
            "#4e73df",
            "#1cc88a",
            "#36b9cc",
            "#f6c23e",
            "#e74a3b",
          ],
          borderWidth: 0,
        },
      ],
    },
    options: {
      responsive: true,
      cutout: "70%",
      plugins: {
        legend: {
          position: "bottom",
        },
      },
    },
  });

  // 单词掌握程度图表（7个等级）
  new Chart(masteryChart.value, {
    type: "bar",
    data: {
      labels: ProficiencyLabels,
      datasets: [
        {
          label: "单词数量",
          data: ProficiencyData, // 这里将被动态替换
          backgroundColor: [
            "#e74a3b", // 初见 - 红
            "#f6c23e", // 模糊 - 黄
            "#f4b619", // 了解 - 深黄
            "#fd7e14", // 一般 - 橘
            "#36b9cc", // 生疏 - 青蓝
            "#1cc88a", // 熟悉 - 绿
            "#4e73df", // 掌握 - 蓝
          ],
        },
      ],
    },
    options: {
      responsive: true,
      plugins: {
        legend: {
          display: false,
        },
      },
      scales: {
        y: {
          beginAtZero: true,
        },
      },
    },
  });

}
onMounted(() => {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved) {
    wordsPerGroup.value = parseInt(saved);
  }
  loadReviewWordsCount();
  loadSigninRecords();
  fetchStats();
  loadGetUserData();
  AllChartDataRequestComplete();
});

// const logout = () => {
//   localStorage.removeItem('token');
//   router.push('/');
// };

//获取用户数据
// import { ref, onMounted } from 'vue';

const stats = ref(null); // 用于存储学习统计信息
const error = ref(null); // 用于存储错误信息

// 获取存储在 localStorage 中的用户 ID

// 获取用户学习统计信息的函数
const fetchStats = async () => {
  if (!userId) {
    error.value = "用户 ID 丢失，请先登录";
    return;
  }

  const result = await getUserStats(userId); // 调用 getUserStats

  if (result.success) {
    stats.value = result.stats; // 更新学习统计信息
    // console.log(result.stats);
  } else {
    error.value = result.message; // 显示错误信息
  }
  // console.log(stats.value);
  learnedCount.value = stats.value.learned_words;
  unlearnedCount.value = stats.value.unlearned_words;
  wordsTotle.value = stats.value.total_words;
  username.value = stats.value.username;
};

import { inject } from "vue";

const theme = inject("theme");
const setTheme = (newTheme) => {
  theme.value = newTheme; // 更新全局主题
};
</script>

<style scoped lang="scss">
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

.dashboard-container {
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

// .top-nav {
//   display: flex;
//   justify-content: space-between;
//   align-items: center;
//   padding: 1rem 2rem;
//   background-color: var(--bg-color);

//   // background: linear-gradient(135deg, #1e3c72, #2a5298);
//   box-shadow: 0 0.15rem 0.75rem 0 var(--shadow-color);

//   .nav-links {
//     display: flex;
//     gap: 1rem;
//   }

//   .nav-button {
//     padding: 0.5rem 1rem;
//     // color: rgba(255, 255, 255, 0.8);
//     text-decoration: none;
//     border-radius: 0.35rem;
//     transition: all 0.3s;
//     color: var(--text-color);

//     &:hover {
//       color: var(--card-bg);
//       background: rgba(0, 0, 0, 0.2);
//     }
//   }

//   .logout-button {
//     padding: 0.5rem 1rem;
//     background: #126268;
//     color: white;
//     border: none;
//     border-radius: 0.35rem;
//     cursor: pointer;
//     transition: all 0.3s;

//     &:hover {
//       background: #be2617;
//     }
//   }
// }

.dashboard-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.user-overview {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.welcome-card {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  background: var(--bg-color);
  border-radius: 0.35rem;
  box-shadow: 0 0.15rem 0.75rem 0 var(--shadow-color);

  .avatar {
    font-size: 3rem;
    color: #4e73df;
    margin-right: 1.5rem;
  }

  .user-info {
    h2 {
      margin: 0 0 0.5rem;
      font-size: 1.25rem;
      color: #4e73df;
    }

    p {
      margin: 0 0 0.5rem;
      color: #858796;
    }

    .streak {
      display: flex;
      align-items: center;
      color: #f6c23e;

      i {
        margin-right: 0.5rem;
      }
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;

  @media (min-width: 576px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  display: flex;
  padding: 1rem;
  background: var(--bg-color);
  border-radius: 0.35rem;
  box-shadow: 0 0.15rem 0.75rem 0 var(--shadow-color);
  border-left: 0.25rem solid var(--card-color);

  .stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(var(--card-color), 0.1);
    color: var(--card-color);
    border-radius: 50%;
    font-size: 1.25rem;
    margin-right: 1rem;
  }

  .stat-info {
    h3 {
      margin: 0 0 0.25rem;
      font-size: 0.9rem;
      color: #858796;
      font-weight: 600;
    }

    p {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 700;
      color: #5a5c69;
    }

    input {
      background-color: var(--card-bc);
      color: var(--text-color);
      border: 1px solid rgba(255, 255, 255, 0.2);
      /* 半透明边框，适配暗色背景 */
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 14px;
      width: 60px;
      text-align: center;
      outline: none;
      transition: border 0.3s, box-shadow 0.3s;
    }

    input:focus {
      border-color: #fff;
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

    button {
      background-color: var(--bg-color);
      color: var(--text-color);
      border: 1px solid rgba(255, 255, 255, 0.2);
      /* 可选边框，可根据主题调整 */
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s, box-shadow 0.3s;
    }

    button:hover {
      background-color: rgba(255, 255, 255, 0.1);
      /* 或稍微变亮/变暗的 bg */
      box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
    }

    button:active {
      transform: scale(0.97);
    }
  }
}

.visualization-section {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;

  @media (min-width: 992px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.chart-card {
  padding: 1.5rem;
  background: var(--bg-color);
  border-radius: 0.35rem;
  box-shadow: 0 0.15rem 0.75rem 0 var(--shadow-color);

  h3 {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: #4e73df;
    display: flex;
    align-items: center;

    i {
      margin-right: 0.5rem;
    }
  }

  .chart-container {
    position: relative;
    height: 250px;
  }
}

.calendar {
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

    button {
      background: none;
      border: none;
      color: #4e73df;
      cursor: pointer;
      padding: 0.5rem;

      &:hover {
        color: #224abe;
      }
    }

    h4 {
      margin: 0;
      font-size: 1rem;
    }
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;

    .day {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 2.5rem;
      border-radius: 50%;
      font-size: 0.85rem;
      position: relative;

      &.checked {
        background: rgba(28, 200, 138, 0.1);
        color: #1cc88a;
      }

      &.today {
        font-weight: bold;
        color: #4e73df;
      }

      i {
        position: absolute;
        bottom: 0;
        font-size: 0.6rem;
      }
    }
  }
}

.user_signin {
  margin-left: 15px;
}

.signin-btn {
  width: 100px;
  padding: 10px 0px;
  background: linear-gradient(135deg, #9aa7ff 0%, #c4cbfa 100%);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(255, 154, 158, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  // margin: 0 auto;
  justify-content: center;
}

.signin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(255, 154, 158, 0.4);
}

.signin-btn:active {
  transform: translateY(0);
}
</style>